fea: add PIX donation flow to /contributing page#258
Closed
marco-souza wants to merge 5 commits intomainfrom
Closed
fea: add PIX donation flow to /contributing page#258marco-souza wants to merge 5 commits intomainfrom
marco-souza wants to merge 5 commits intomainfrom
Conversation
Implements self-service PIX donations with instant QR code generation: **Libraries (src/lib/)** - pix.ts: EMV QRCPS-MPM PIX BR Code generator with CRC16-CCITT - qrcode.ts: Zero-dependency QR code SVG generator (byte mode, EC level M) **API Endpoints (src/pages/api/)** - /api/pix-qr: Returns QR code SVG with caching (ETag/304) - /api/pix-result: Returns HTML fragment with QR img + Copia e Cola **Components (src/components/)** - DonationForm.astro: Alpine.js amount selector (buttons + custom input) - DonationResult.astro: htmx-powered result pane with Alpine re-init **Page Integration** - /contributing: Replaced old CTA-based donations with PIX section - i18n: Added 24 new keys under contributing.donations.pix.* **Tests (56 passing)** - pix.test.ts: 15 unit tests for PIX BR Code generation - qrcode.test.ts: 16 unit tests for QR code SVG - pix-endpoints.test.ts: 25 integration tests for API endpoints - pix-donation.spec.ts: Playwright E2E smoke test Dependencies added: alpinejs, htmx.org Closes #248
Contributor
❌ Playwright E2E — Some tests failed
|
…ntive text - Remove client:load from DonationForm (Astro components can't be hydrated) - Move Alpine initialization to Layout.astro (global Alpine.start()) - Fix TypeScript-in-JS syntax error in DonationForm inline script - Use data-* attributes for i18n strings instead of define:vars - Use is:inline scripts for Alpine registration and htmx hooks - Change layout to single-column: result replaces form area inline - Add incentive text explaining how donations fund the community - 56 tests passing, build clean, lint OK
Contributor
❌ Playwright E2E — Some tests failed
|
Swap the client-side interactivity stack from Alpine.js + htmx to Datastar, which provides both reactivity (signals) and hypermedia in a single library. Changes: - Remove alpinejs, htmx.org dependencies - Add @sudodevnull/datastar and @starfederation/datastar-sdk - Replace DonationForm.astro + DonationResult.astro with single DonationSection.astro using Datastar signals and attributes - Layout loads Datastar globally via module import - All interactivity uses data-* attributes: data-signals (state), data-bind (two-way binding), data-on:click (events), data-show (visibility), data-text (content), data-class (class toggling) - PIX code generated client-side via bundled pix.ts library - QR code loaded via <img> pointing to /api/pix-qr endpoint - i18n strings passed via define:vars script globals Build: passes, Tests: 56/56, Lint: clean
Contributor
❌ Playwright E2E — Some tests failed
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements self-service PIX donations directly on the
/contributingpage, replacing the old contact-form-based flow.Visitors can now select a suggested amount (R$ 25, R$ 50, R$ 100) or enter a custom value (R$ 5–R$ 10,000) and instantly receive a scannable QR code + Copia e Cola to complete their donation — no backend, no contact form needed.
Closes #248
What's Included
Core Libraries
src/lib/pix.ts— EMV QRCPS-MPM PIX BR Code generator with CRC16-CCITT checksumsrc/lib/qrcode.ts— Zero-dependency QR code SVG generator (byte mode, EC level M, versions 1–10)API Endpoints (Cloudflare Workers)
GET /api/pix-qr?amount=X— Returns QR code asimage/svg+xmlGET /api/pix-result?amount=X— Returns HTML fragment (QR img + Copia e Cola + copy button)UI Components
DonationForm.astro(Alpine.js) — Amount selector with validation, suggested buttons, large donation info messageDonationResult.astro(htmx) — Lazy-fetched result pane with loading skeleton, clipboard copy, Alpine re-initialization after swapIntegration
/contributingpage updated — PIX section immediately after hero, highlighted background, responsive grid layoutcontributing.donations.pix.*(all pt-BR)<noscript>with contact linkTests (56 passing)
pix.test.tsqrcode.test.tspix-endpoints.test.tspix-donation.spec.tsFiles Changed
alpinejs,htmx.orgHow to Test
Screenshots
Add screenshots after running
bun devand visiting /contributing